<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ExtInfoWindow Example</title>

    <link type="text/css" rel="Stylesheet" media="screen" href="css/redInfoWindow.css"/>
    <link type="text/css" rel="Stylesheet" media="screen" href="css/blueInfoWindow.css"/>
    <link type="text/css" rel="Stylesheet" media="screen" href="css/bubbleInfoWindow.css"/>

    <style>
      #map{
        width: 49%;
        height: 400px;
        float: left;
      }
      #demo_explanation{
        border-right: 1px solid #000;
        float: left;
        width: 49%;
        margin-right: 5px;
        padding-right: 5px;
        font-size: .9em;
      }
      iframe{
        background-color: #DDD;
        border: 0;
        margin-left: 20px;
        font-size: .9em;
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q">
    </script>
    <script src="../src/extinfowindow.js" type="text/javascript"></script>
    <script type="text/javascript">
      var map;
      function load() {
        if (GBrowserIsCompatible()) {
          map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(41, -96), 3);

          //marker with ext info window with a red skin and ajax content
          var redIcon1 = new GIcon(G_DEFAULT_ICON);
          redIcon1.iconAnchor = new GPoint(0, 0);
          redIcon1.infoWindowAnchor = new GPoint(10, 0 );

          marker = new GMarker( new GLatLng(36, -100), redIcon1);
          GEvent.addListener(marker, 'click', function(){ 
            marker.openExtInfoWindow(
              map,
              "custom_info_window_red",
              "<div>Loading...</div>",
              {
                ajaxUrl: "ajax/ajaxTest.html", 
                beakOffset: 3
              }
            ); 
          });
          map.addOverlay(marker);
        }
      }
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>